import React from 'react';

/*
  学习目标：shouldComponentUpdate 避免无效更新
  需求：count更新时Footer更新，msg更新时，footer不更新
*/

export default class App extends React.Component {
  state = {
    count: 0,
    msg: '1',
  };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleClickMsg = () => {
    this.setState({ msg: this.state.msg + '~' });
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <h2>{this.state.msg}</h2>
        <button onClick={this.handleClick}>点我修改数量</button>
        <button onClick={this.handleClickMsg}>点我修改msg</button>
        <Footer count={this.state.count}></Footer>
      </div>
    );
  }
}

class Footer extends React.Component {
  // 通过判断条件，自定义是否更新
  shouldComponentUpdate(nextProps) {
    // console.log('this.props, nextProps  ----->  ', this.props, nextProps);
    // nextProps表示更新后的props，this.props代表旧的props
    // 通过比较props是否相同，来决定是否更新
    // 不相同则更新
    if (nextProps.count !== this.props.count) {
      return true;
    }
    // 相同不更新，
    return false;
  }

  render() {
    console.log('render被执行了  ----->  ');
    return (
      <div>
        我是Footer ， 我只接受count更新
        <h1>{this.props.count}</h1>
      </div>
    );
  }
}
